<template>
  <div class="login-wrap">
    <div class="ms-login">
      <div class="left">
        <div class="welcom">欢迎来到</div>
        <div class="bold-title">江西省水土保持</div>
        <div class="bold-title">信息化综合平台</div>
      </div>
      <div class="right">
        <div class="ms-title">登录</div>
        <el-form :label-position="'top'" :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
          <el-form-item prop="username" label="用户">
            <el-input v-model="param.username" placeholder="账号"> </el-input>
          </el-form-item>
          <el-form-item prop="password" label="密码">
            <el-input type="password" placeholder="密码" v-model="param.password" @keyup.enter.native="submitForm()"> </el-input>
          </el-form-item>
          <div class="login-btn">
            <div class="login-btn-inner" @click="submitForm">登录</div>
          </div>
        </el-form>
      </div>
    </div>
    <div class="bottom-fotter">
      <div>本系统建议您使用1280*800及以上分辨率的屏幕</div>
      <div>推荐浏览器：谷歌(Chrome)、360安全浏览器极速模式</div>
      <div>Copy Right©2022 江西省水利科学院 ｜ 江西省洪图技术咨询有限公司</div>
    </div>
  </div>
</template>

<script>
import { loginDoLogin, viewPageStationInfo, getCurrentUser } from '../../api/index.js';
import { Base64 } from 'js-base64';
import md5 from 'js-md5';

export default {
  data: function () {
    return {
      remPwd: true,
      initOption: {
        tooltip: {
          trigger: 'item',
          formatter: function (val) {
            var data = val.value ? val.value : 0;
            return val.name + ':' + data;
          }
        },
        grid: {
          left: '2%',
          top: '2%',
          right: '2%',
          bottom: '2%'
        },

        geo: {
          type: 'map',
          map: 'shengMap',
          label: {
            normal: {
              show: true //省份名称
            },
            emphasis: {
              show: true
            }
          }
        }
      },
      param: {
        username: '',
        password: ''
      },
      myChart: null,
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    };
  },
  created() {
    let pwd = localStorage.getItem('pwd');
    if (pwd) {
      console.log(Base64.decode(pwd));
    }
  },

  methods: {
    getstationData(stcdList) {
      let data = {
        currentPage: 1,
        pageSize: 1000
      };
      viewPageStationInfo(data).then((res) => {
        let data = res.object.dataList.filter((item) => {
          return item.stcd === stcdList[0].stcd;
        });

        stationInfo = {
          stcd: data[0].stcd,
          stnm: data[0].stnm,
          calculator: data[0].calculator,
          reviewer: data[0].reviewer,
          observer: data[0].observer,
          calculatorName: data[0].calculatorName,
          reviewerName: data[0].reviewerName,
          observerName: data[0].observerName
        };
        localStorage.setItem('stationInfo', JSON.stringify(stationInfo));

        this.$router.push('/shishijiangyu');
      });
    },

    login() {
      let that = this;
      getCurrentUser().then((res) => {
        if (!res.object.stcdList) {
          that.$message.error('账号未绑定测站信息，请联系管理员');
          return;
        }

        sessionStorage.setItem('userInfo', JSON.stringify(res.object));
        localStorage.setItem('stcdList', JSON.stringify(res.object.stcdList));
        that.getstationData(res.object.stcdList);
      });
    },

    initdata() {
      this.login();
    },
    submitForm() {
      let that = this;
      this.$refs.login.validate((valid) => {
		 
        if (valid) {
          if (that.remPwd) {
            localStorage.setItem('pwd', md5(that.param.password));
          } else {
            localStorage.removeItem('pwd');
          }
          loginDoLogin({
            loginName: that.param.username,
            password: md5(that.param.password)
          })
            .then((e) => {
              if (e.code == 1) {
                that.$router.push({
					path:'/loadingpage',
					query:{
						token:e.object
					}
				})
                this.$message.success('登录成功');
                localStorage.setItem('ms_username', this.param.username);

                sessionStorage.setItem('token', e.object);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          this.$message.error('请输入账号和密码');

          return false;
        }
      });
    }
  }
};
</script>
<style>
.login-wrap .el-form-item__error {
  color: #fff !important;
}
.login-wrap .el-form-item__label {
  font-weight: bold;
}
.login-wrap .el-input__inner {
  border-radius: 22px;
  line-height: 38px;
  height: 38px;
}
</style>
<style scoped>
.bottom-fotter {
  color: #fff;
  position: fixed;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
}
.bottom-fotter div {
  padding: 4px 0;
}
.login-btn-inner {
  background: #328fff;
  color: #fff;
  line-height: 40px;
  border-radius: 22px;
  cursor: pointer;
}
.welcom {
  color: #fff;
  padding-bottom: 14px;
  padding-top: 72px;
}
.tip-icon {
  background: url(../../assets/img/info.png) no-repeat 0px 6px;
  background-size: 16px 16px;
}
.bold-title {
  font-size: 72px;

  color: #fff;
  font-family: dabiaoti;
}
#allmap {
  height: 100%;
}
.login-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(../../assets/img/login.png) no-repeat;
  background-size: 100% 100%;
}
.ms-title {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}
.ms-login {
  position: absolute;
  left: 50%;
  z-index: 10000;
  top: 50%;
  width: 1100px;
  margin: -190px 0 0 -350px;
  border-radius: 5px;

  overflow: hidden;
  display: flex;
}
.ms-login .left {
  width: 550px;
  height: 317px;
  border-right: 1px solid #ccc;
}
.ms-login .right {
  width: 390px;
  background: rgba(225, 225, 225, 0.6);
  border-radius: 12px;
}
.ms-content {
  padding: 10px 30px 30px 30px;
}
.login-btn {
  text-align: center;
}
.login-btn button {
  width: 100%;
  height: 36px;
  margin-bottom: 10px;
}
.login-tips {
  padding-left: 20px;
  font-size: 12px;
  line-height: 30px;
  color: #333;
}
</style>
